<template>
  <div style="height: 100%" v-loading="loading">
    <div class="tabpane topcolor flexb othertop">
      <div class="flex">
        <a class="active fontz">{{$t('jy.ramJyCaption')}}</a>
        <div class="resources">
          <eos-resource />
        </div>
      </div>
    </div>
    <div class="jycenter" style="height: 88%">
      <!-- 现价/市价交易 -->
      <div class="flexb mrmcbox" style="height: 100%">

        <!-- 买入 -->
        <div class="xjmrbox">
          <el-form ref="xjFormMr" :model="xjFormMr"
          label-width="70px" size="mini">
            <!-- 余额 -->
            <div class="flexb mb">
              <span class="color-lv fontz"
                style="min-width: 70px; text-align: right; padding-left: 16px;">{{$t('jy.purchase')}} RAM</span>
              <template v-if="chain === 'eos'">
                <span class="fontx" @click="handleMrPesentInput(100)" v-if="eosBalance">{{$t('jy.balance')}} {{eosBalance}}</span>
                <span v-else-if="$store.state.app.scatter && $store.state.app.scatter.identity">
                  {{$t('jy.balance')}} <i class="el-icon-refresh el-icon-loading"></i> EOS</span>
              </template>
            </div>

            <!-- 价格 -->
            <el-form-item :label="$t('jy.purchasep')">
              <el-input :value="`≈ ${ramPrice}`" disabled>
                <span slot="suffix">EOS/KB</span>
              </el-input>
            </el-form-item>

            <!-- 数量 -->
            <el-form-item :label="$t('jy.purchasen')" style="margin-bottom: 5px">
              <el-input v-model="buy" type="number"
              @change="handleInputBuy"
              @input="handleMrNumberInput"
              @blur="handleFormatNumber(1)"
              :step="0.0001" :min="0.0001"
              clearable>
                <span slot="suffix">EOS</span>
              </el-input>
            </el-form-item>

            <!-- 预计买入 -->
            <el-form-item class="budgetBuy">
              <div class="pd8px gray">{{$t('myWallet.planBuy')}}：{{ expectBuy }} KB</div>
            </el-form-item>

            <!-- 百分比 -->
            <el-form-item style="margin-bottom: 5px">
              <div class="block elsildebox buyPercent">
                <el-slider :format-tooltip="formatTooltip"
                  v-model="mrpesent"
                  :step="1"
                  @change="handleMrPesentInput">
                </el-slider>
                <div class="el-slider__stop" @click="handleMrPesentInput(0)" style="left: 0%;"></div>
                <div class="el-slider__stop" @click="handleMrPesentInput(25)" style="left: 25%;"></div>
                <div class="el-slider__stop" @click="handleMrPesentInput(50)" style="left: 50%;"></div>
                <div class="el-slider__stop" @click="handleMrPesentInput(75)" style="left: 75%;"></div>
                <div class="el-slider__stop" @click="handleMrPesentInput(100)" style="left: 100%;"></div>
              </div>
              <div class="flexb pesentNumber">
                <span style="margin: 0 7px 0 -5px;">0%</span>
                <span style="margin-left:5px">25%</span>
                <span style="margin-left:15px">50%</span>
                <span style="margin-right:-5px">75%</span>
                <span>100%</span>
              </div>
            </el-form-item>

            <!-- 买入 -->
            <el-form-item size="small" style="margin-bottom: 0px;">
              <div v-if="$store.state.app.scatter">
                <el-button class="mrbtn" v-if="$store.state.app.scatter.identity && chain === 'eos'"
                @click="handleBuyRam"
                :loading="xjFormMr.submitLoading"> {{ xjFormMr.submitLoading ? $t('jy.purchaseIng') : $t('jy.purchase') }}</el-button>
                <el-button class="mrbtn"
                  v-else-if="$store.state.app.scatter.identity && chain !== 'eos'"
                  @click="handleWalletPermission">
                  {{$t('bosChain.tradeTip1')}} EOS {{$t('bosChain.tradeTip2')}}
                </el-button>
                <el-button class="mrbtn" v-if="!$store.state.app.scatter.identity">
                  <span class="color-fff" @click="handleWalletPermission">{{$t('wallet.wpromis')}}</span>
                </el-button>
              </div>
            </el-form-item>
            <el-tooltip placement="bottom-end" effect="light">
              <div slot="content" class="cozyTipContent">
                <p>· {{$t('myWallet.ramTip1')}}</p>
              </div>
              <div class="cozyTip">
                {{$t('jy.ramTradExplanation')}}
                <i class="iconfont icon-huaban"></i>
              </div>
            </el-tooltip>
          </el-form>
        </div>

        <!-- 卖出 -->
        <div class="xjmcbox">
          <el-form ref="xjFormMc" :model="xjFormMc"
          label-width="80px" size="mini">
            <!-- 余额 -->
            <div class="flexb mb">
              <span class="color-ho fontz"
              style="min-width: 70px; text-align: right; padding-left: 26px;">{{$t('jy.sellOut')}} RAM</span>
              <span class="fontx" v-if="ramBalance && chain === 'eos'" @click="handleMcPesentInput(100)">{{$t('jy.balance')}} {{ramBalance}} KB</span>
              <span class="fontx" v-else-if="$store.state.app.scatter && $store.state.app.scatter.identity && chain === 'eos'"
              @click="handleMcPesentInput(100)">{{$t('jy.balance')}} <i class="el-icon-refresh el-icon-loading"></i> KB</span>
            </div>
            <!-- 价格 -->
            <el-form-item :label="$t('jy.sellOutp')">
              <el-input :value="`≈ ${ramPrice}`" disabled>
                <span slot="suffix">EOS/KB</span>
              </el-input>
            </el-form-item>

            <!-- 数量 -->
            <el-form-item class="relative"
            :label="$t('jy.sellOutn')" style="margin-bottom: 5px">
              <el-input v-model="sell" type="number"
              @change="handleInputSell"
              @input="handleMcNumberInput"
              @blur="handleFormatNumber(2)"
              :step="0.01"
              :min="0.01"
              clearable>
                <span slot="suffix">KB</span>
              </el-input>
            </el-form-item>
            <!-- 预计卖出 -->
            <el-form-item class="budgetBuy">
              <div class="pd8px">{{$t('myWallet.planSell')}}：{{ expectSell }} EOS</div>
            </el-form-item>

            <!-- 百分比 -->
            <el-form-item style="margin-bottom: 5px">
              <div class="block elsildebox">
                <el-slider :format-tooltip="formatTooltip"
                  v-model="mcpesent"
                  @change="handleMcPesentInput"
                  :step="1">
                </el-slider>
                <div class="el-slider__stop" @click="handleMcPesentInput(0)" style="left: 0%;"></div>
                <div class="el-slider__stop" @click="handleMcPesentInput(25)" style="left: 25%;"></div>
                <div class="el-slider__stop" @click="handleMcPesentInput(50)" style="left: 50%;"></div>
                <div class="el-slider__stop" @click="handleMcPesentInput(75)" style="left: 75%;"></div>
                <div class="el-slider__stop" @click="handleMcPesentInput(100)" style="left: 100%;"></div>
                <div class="flexb pesentNumber">
                  <span style="margin: 0 7px 0 -5px;">0%</span>
                  <span style="margin-left:5px">25%</span>
                  <span style="margin-left:15px">50%</span>
                  <span style="margin-right:-5px">75%</span>
                  <span>100%</span>
                </div>
              </div>
            </el-form-item>

            <!-- 卖出 -->
            <el-form-item size="small" style="margin-bottom: 0;">
              <div v-if="$store.state.app.scatter">
                <el-button class="mcbtn" v-if="$store.state.app.scatter.identity && chain === 'eos'"
                @click="handleSellRam('sellForm')"
                :loading="xjFormMc.submitLoading"> {{ xjFormMc.submitLoading ? $t('jy.sellOuting') : $t('jy.sellOut') }}</el-button>
                <el-button class="mcbtn"
                  v-else-if="$store.state.app.scatter.identity && chain !== 'eos'"
                  @click="handleWalletPermission">
                  {{$t('bosChain.tradeTip1')}} EOS {{$t('bosChain.tradeTip2')}}
                </el-button>
                <el-button class="mcbtn" v-if="!$store.state.app.scatter.identity">
                  <span class="color-fff" @click="handleWalletPermission">{{$t('wallet.wpromis')}}</span>
                </el-button>
              </div>
            </el-form-item>
            <el-tooltip placement="bottom-end" effect="light">
              <div slot="content" class="cozyTipContent">
                <p>· {{$t('myWallet.ramTip1')}}</p>
                <p>· {{$t('myWallet.ramTip2')}}</p>
                <p>· {{$t('myWallet.ramTip3')}}</p>
              </div>
              <div class="cozyTip">
                {{$t('jy.ramTradExplanation')}}
                <i class="iconfont icon-huaban"></i>
              </div>
            </el-tooltip>
          </el-form>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
import { EosModel } from '@/utils/eos/index';
import { toFixed, toNonExponential } from '@/utils/validate';
import ScatterPermission from '@/components/ScatterPermission';
import Agreement from '@/components/Agreement';
import EosResource from '@/components/EosResource'; // eos资源

export default {
  name: 'trading-center-bottom',
  components: {
    ScatterPermission,
    Agreement,
    EosResource
  },
  data() {
    return {
      chain: 'eos',
      historyUpdate: true,
      eosBalance: '',
      // 交易数据
      buy: '', // 买入
      sell: '', // 卖出
      // ramPrice: 0, // 当前ram价格
      ramBalance: 0, // ram 可交易余额
      expectBuy: 0, // 预计买入
      expectSell: 0, // 预计卖出
      symbolScience: '', // 单位

      loading: false,
      scatter: null,
      xjFormMr: {
        submitLoading: false,
      },
      xjFormMc: {
        submitLoading: false,
      },
      mrpesent: 0, // 买入选择百分比
      mcpesent: 0, // 买出选择百分比

      timerBlance: null, // 余额获取开/关
      ramPrice: 0.0000,
    };
  },
  props: {
    ramPriceNum: Number,
  },
  watch: {
    // 买入量改变
    buy: function listen(newVal) {
      this.expectBuy = toFixed(toNonExponential(newVal / this.ramPrice), 2);
    },
    // ram实时价格改变
    ramPriceNum: function listen(newVal) {
      if (!newVal) return;
      this.ramPrice = Number(newVal.toFixed(4));
      this.expectBuy = toFixed((this.buy / newVal), 2);
      this.expectSell = toFixed((this.sell * this.ramPrice), 4);
    },
    // 卖出量改变
    sell: function listen(newVal) {
      this.expectSell = toFixed(toNonExponential(newVal * this.ramPrice), 4);
    },
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        const scat = this.$store.state.app.scatter;
        this.chain = scat.chain;
        if (val) {
          this.handleGetInfo();
          this.handleBlanceIvit();
        }
      },
      deep: true,
    },
  },
  created() {
    // this.ramPrice = this.ramPriceNum;
  },
  destroyed() {
  },
  mounted() {
    this.loading = false;
    const scat = this.$store.state.app.scatter;
    this.chain = scat.chain;
    this.handleBlanceIvit();
    this.handleGetInfo();
    this.handleExchangeScience();
  },
  beforeDestroy() {
    if (this.timerBlance) {
      clearTimeout(this.timerBlance);
    }
  },
  methods: {
    // 获取账户信息
    handleGetInfo() {
      const scat = this.$store.state.app.scatter
      if (scat && scat.identity && this.chain === 'eos') {
        const params = {
          account_name: scat.identity.accounts[0].name
        };
        EosModel.getAccount(params, (res) => {
          const result = res;
          if (result.ram_quota) {
            const ram = result.ram_quota - result.ram_usage;
            this.ramBalance = toFixed((ram / 1024), 2);
          }
        });
      }
    },
    // 离开焦点时 格式化进度位
    handleFormatNumber(val) {
      if (val === 1) {
        this.buy = toFixed(this.buy, 4);
        this.handleMrNumberInput(this.buy);
      }
      if (val === 2) {
        this.sell = toFixed(this.sell, 2);
        this.handleMcNumberInput(this.sell);
      }
    },
    // 买入输入框事件
    handleInputBuy(str) {
      this.buy = toFixed(Number(str), 4);
    },
    // 卖出输入框事件
    handleInputSell(str) {
      this.sell = toFixed(Number(str), 2);
    },

    // 百分比显示
    formatTooltip(val) {
      return `${val}%`;
    },

    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      sessionStorage.setItem('checkWalletByChain', 'EOS');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },

    // 余额获取
    handleBlanceIvit() {
      if (this.$store.state.app.scatter
      && this.$store.state.app.scatter.identity
      && this.chain === 'eos') {
        EosModel.getCurrencyBalance('EOS', 'eosio.token', (result) => {
          if (result.error) {
            this.$message.error(`${result.message} 【${result.error.code}】`);
            return;
          }
          let res = result;
          if (!res.length) {
            res = '0.0000 EOS';
          } else {
            res = result[0];
          }
          this.loading = false;
          this.eosBalance = res;
        });
      }
      if (this.timerBlance) {
        clearTimeout(this.timerBlance);
      }
      setTimeout(this.handleBlanceIvit, 8000);
    },

    // 买入输入买入量
    handleMrNumberInput(val) {
      const blc = parseFloat(this.eosBalance);
      const money = parseFloat(val);
      let pesent = 0;
      if (blc > 0) {
        pesent = (money / blc) * 100;
        if (pesent > 100) {
          pesent = 100;
        }
        this.mrpesent = Number(pesent.toFixed(2));
      }
    },

    // 买入输入百分比
    handleMrPesentInput(val) {
      this.mrpesent = val;
      const eosBalance = parseFloat(this.eosBalance);
      const data = val / 100;
      if (eosBalance) {
        this.buy = toFixed((eosBalance * data), 4);
        return;
      }
      this.mrpesent = 0;
    },
    // 卖出输入卖出量
    handleMcNumberInput(val) {
      const blc = parseFloat(this.ramBalance);
      const money = parseFloat(val);
      let pesent = 0;
      if (blc > 0) {
        pesent = (money / blc) * 100;
        if (pesent > 100) {
          pesent = 100;
        }
        this.mcpesent = Number(pesent.toFixed(2));
      }
    },
    // 卖出输入百分比
    handleMcPesentInput(val) {
      this.mcpesent = val;
      const ramBalance = parseFloat(this.ramBalance);
      const data = val / 100;
      if (ramBalance) {
        this.sell = toFixed((ramBalance * data), 2);
        return;
      }
      this.mcpesent = 0;
    },
    // 买入RAM
    handleBuyRam() {
      const scat = this.$store.state.app.scatter;
      // 其他钱包下单
      if (scat.wallet !== 'Scatter'
      && scat.wallet !== 'Ironman'
      && scat.wallet !== 'cloudWallet') {
        this.$emit('listenShowTip', true);
        return;
      }
      if (isNaN(this.buy) || this.buy === '' || this.buy === '0.0000') {
        this.$message.error(this.$t('public.inputRightNum'));
        return;
      }
      if (parseFloat(this.buy) > parseFloat(this.eosBalance)) {
        this.$message.error(this.$t('jy.error3'));
        return;
      }
      const arr = [this.buy];
      arr.push(this.symbolScience);
      const params = arr.join(' ');
      this.xjFormMr.submitLoading = true;
      EosModel.eosBuyram(params, (res) => {
        this.xjFormMr.submitLoading = false;
        if (res.processed) { // 买入RAM成功
          this.$message.success(this.$t('public.buySuccess'));
          setTimeout(() => {
            this.handleRefreshOrderList();
          }, 3000);
          this.buy = '';
          this.handleGetInfo();
          this.handleBlanceIvit();
          return
        }
        EosModel.handleScatterErrorBack(res);
      });
    },
    // 卖出RAM
    handleSellRam() {
      const scat = this.$store.state.app.scatter;
      // 其他钱包下单
      if (scat.wallet !== 'Scatter'
      && scat.wallet !== 'Ironman'
      && scat.wallet !== 'cloudWallet') {
        this.$emit('listenShowTip', true);
        return;
      }
      if (isNaN(this.sell) || this.sell === '' || this.sell === '0.00') {
        this.$message.error(this.$t('public.inputRightNum'));
        return;
      }
      if (parseFloat(this.sell) > parseFloat(this.ramBalance)) {
        this.$message.error(this.$t('jy.error3'));
        return;
      }
      const bytes = window.parseInt(this.sell * 1024);
      this.xjFormMc.submitLoading = true;
      EosModel.eosSellram(bytes, (res) => {
        this.xjFormMc.submitLoading = false;
        if (res.processed) { // 买入RAM成功
          this.$message.success(this.$t('public.sellSuccess'));
          setTimeout(() => {
            this.handleRefreshOrderList();
          }, 3000);
          this.sell = '';
          // 获取账户明细
          this.handleGetInfo();
          this.handleBlanceIvit();
          return
        }
        EosModel.handleScatterErrorBack(res);
      });
    },
    // 刷新底部交易历史
    handleRefreshOrderList() {
      if (this.historyUpdate) {
        this.$emit('listenRefreshOrderList', true);
        this.historyUpdate = false;
        return;
      }
      this.$emit('listenRefreshOrderList', false);
      this.historyUpdate = true;
    },
    // 交易环境
    handleExchangeScience() {
      const env = process.env.NODE_ENV;
      let Science = 'EOS';
      switch (env) {
        case 'development':
          Science = 'SYS'
          break;
        case 'production':
          Science = 'EOS';
          break;
        default:
          Science = 'EOS';
          break;
      }
      this.symbolScience = Science;
    },
    // 跳转cpu
    handleJumpCpu() {
      const language = this.$store.state.app.language;
      if (language === 'zh-CN' || language === 'zh-TW') {
        window.open('https://www.cpubaba.com');
      }
    },
    /*
    * 进度格式化
    * @params numb Number
    * @p 保留小数后几位
    */
    toFixed(numb, p) {
      return toFixed(numb, p);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-color-lv: #67C269;
$-color-ho: #EE1443;
$-color-black: #7b8db9;

.color-lv {
  color: $-color-lv;
}
.color-ho {
  color: $-color-ho;
}
.topcolor {
  background: $-topcolorf7;
}
.budgetBuy {
  margin-bottom: 0 !important;
  color: #999;
}
.fontx {
  cursor: pointer;
}

.cozyTipContent {
  width: 280px;
  font-size: 12px;
  line-height: 25px;
  padding: 5px;
  font-family: SourceHanSansSC-regular;
  color: #999;
}
.cozyTip {
  margin-top: 4px;
  float: right;
  font-size: 12px;
  color: #999;
  font-family: SourceHanSansSC-regular;
  cursor: pointer;
  i {
    font-weight: bold;
    font-size: 14px;
    vertical-align: middle;
  }
}
.xjmrbox, .xjmcbox {
  position: relative;
  width: 425px;
  max-width: 425px;
  margin: auto;
  font-size: 12px;
  padding: 0px 15px 0px 0;
  margin: 0 auto;
  // flex: 1;
}

.xjmrbox {
  padding: 0px 10px 0 0;
}

.mrmcbox {
  position: relative;

  &::before {
    content: ' ';
    position: absolute;
    width: 1px;
    height: 80%;
    background: #dedede;
    left: 50.2%;
    top: 50%;
    transform: translateY(-50%);
  }
}
.el-form-item__error {
  display: none;
}
.is-error, .is-error-number {
  margin-bottom: 30px !important;

  .el-form-item__error {
    padding: 5px 0 0;
    display: block;
  }
}
.is-error-number {
  margin-bottom: 10px!important;
}

.theme-1B1D27 {
  .trbtable {
    background: none;
  }
  .mrmcbox {
    &::before {
      background: rgba(255, 255, 255, .1);
    }
  }
  .topcolor {
    background: $-topcolor2;
  }

  .tabpane {
    a {
      &.active {
        background: $-black1;
      }
    }
  }

  .exchangeTis {
    color: #7b8db9;
  }

  .trasfStop {
    background: $-black1
  }

  .cpuPercent, .noticebox {
    span {
      color: rgba(255, 255, 255, 0.9) !important;
    }
  }
}
.mcbtn, .mrbtn {
  height: 40px;
  font-size: 14px;
}

.mrbtn {
  width: 100%;
  color: #fff;
  background-color: $-color-lv;
  border-color: $-color-lv;
  -webkit-box-shadow: -1px 0 0 0 $-color-lv;
  box-shadow: -1px 0 0 0 $-color-lv;
}
.mcbtn {
  width: 100%;
  color: #fff;
  background-color: $-color-ho;
  border-color: $-color-ho;
  -webkit-box-shadow: -1px 0 0 0 $-color-ho;
  box-shadow: -1px 0 0 0 $-color-ho;
}


.el-button.active {
  color: #fff;
  border-color: $-main-color;
  background-color: $-main-color;
}

.backfix {
  position: absolute;
  top: 2px;
  color: #c0c4cc;
  font-size: 12px;
  right: 38px;
}

.elsildebox.buyPercent {
  width: 336px;
}

.elsildebox {
  position: relative;
  width: 320px;
  margin-left: 5px;

  .el-slider__stop {
    top: 19px;
    cursor: pointer;
  }
}

.pesentNumber {
  margin-top: -13px;

  span {
    flex: 1;
    text-align: right;
    font-size: 12px;
  }

  span:first-child{
    flex: none;
  }
}

.jycenter {
  position: relative;

  /deep/ .el-input--mini {
    .el-input__inner {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }
  /deep/ .el-form-item--mini {
    .el-form-item__label {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }

  /deep/ .el-input__suffix {
    height: auto;
    line-height: 40px;
    font-size: 13px;
  }

  /deep/ .el-slider__button-wrapper {
    z-index: 9;
  }
}

.trasfStop {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.9);

  .color-yellow, .color-red {
    font-size: 14px;

    i {
      font-size: 40px;
    }

    p {
      padding: 0;
    }

    margin-bottom: 5px;
  }

  p {
    font-size: 14px;
    padding: 3px 0 0;
  }

  a {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
  }
}

.exchangeTis {
  color: #999;
  text-align: right;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  padding-top: 5px;
}

// dialog 样式
.dialogPay{
  /deep/ .el-dialog{
    background: url('../../../assets/img/wallet/bg-financial.png') no-repeat;
    color: white;
    position: relative;

    .el-icon-close{
      color: white;
    }

    .dialog-logo{
      position: absolute;
      font-size: 30px;
      left: 30px;
      top: 20px;
    }
  }

  /deep/ .el-dialog__body{
    padding: 0px;
  }
}

$-clolor: #13A0F9;
.colorThis {
  color: $-clolor !important;
}
// dialog 样式
.mainView-dialog{
  color: white;
  text-align: center;
  padding-top: 20px;

  .gray {
    margin-top: 5px;
    opacity: 0.8;
    font-size: 12px;
  }

  .accountName{
    padding-top: 5px;
    font-size: 16px;
  }

  .btnDiv{
    margin: 22px 0px;
  }

  .tipOut{
    margin-top: 30px;
    height: 100px;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    .tip{
      padding: 20px 0px;
      width: 530px;
      margin: auto;

      .tipTop{
        color: #3F99DC;
        padding: 10px 0px;
      }

      .tipContent{
        padding-left: 40px;
        height: 60px;
        background: url('../../../assets/img/phone_icon.png') center left no-repeat;

        p {
          text-align: left;
          font-size: 14px;
          color: #999;

          &:first-child {
            padding-top: 10px;
            padding-bottom: 3px;
          }
        }
      }
    }
  }
}

.walletCode {
  padding: 30px 0 10px;

  .codebox {
    position: relative;
    width: 180px;
    height: 180px;
    margin: auto;

    .canvasbox {
      width: 100%;
    }

    .logocode {
      padding: 2px;
      position: absolute;
      width: 26px;
      height: 26px;
      left: 50%;
      top: 50%;
      border-radius: 5px;
      background: #fff;
      transform:translate3D(-50%, -50%, 0);
    }

    .overdueCode {
      background: rgba(255, 255, 255, .9);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

      span {
        min-width: 100%;
      }

      a {
        display: block;
      }
    }
  }

  p {
    color: #999;
    padding: 10px 0;
  }

  a {
    color: $-clolor
  }

  .activebox {
    font-size: 12px;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 20px;
    margin: 10px 0 0;
    background: RGBA(255, 239, 239, 1.00);
    color: RGBA(255, 70, 70, 1.00);
  }
}

.relative {
  position: relative;
}

$-remcolor: #8DCEFE;
.remind {display: none}
.remindbox {
  /deep/ .el-input__inner {
    border: 1px solid $-remcolor;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .remind {
    width: 100%;
    position: absolute;
    left: 0;
    line-height: 20px;
    background: $-remcolor;
    z-index: 99;
    padding: 3px 15px;
    font-size: 12px;
    color: #fff;
    display: block;
    i {
      position: absolute;
      right: 5px;
      bottom: 0;
      font-size: 25px;
      cursor: pointer;
    }
  }
}
</style>

